<!-- 组件大小 -->
<template>
    <el-col :sapn="8">
        <el-dropdown trigger="click" @command="componesize">
            <span>
                <el-Tooltip content="组件字体大小" placement="bottom-end">
                    <i class="iconfont icon-zitidaxiao"></i>
                </el-Tooltip>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="CaretRight" v-for="item in groupSize" :key="item.name" :command="item.command" :disabled="size==item.size">
                        {{item.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-col>
</template>

<script lang="ts" setup>
import {CaretRight} from "@element-plus/icons-vue"
import {ref} from "vue"
import "../../assets/font_bqxjm49fz2n/iconfont.css";


const groupSize = ref([  //下拉菜单数据
    {size:'large',name:'超大尺寸',command:'large'},
    {size:'',name:'默认尺寸',command:''},
    {size:'small',name:'较小尺寸',command:'small'}
])

const size = ref('default') //字体大小
const emit = defineEmits<{
    (e:'choneommandSize',size:string):void
}>()

//事件中的value赋值给size
const componesize = (value:string)=>{
    console.log(value);
    size.value = value //判断是否是一致的
    localStorage.setItem('size',value) //永久存储
    emit("choneommandSize",size.value) //传属性
    ElMessage.success('设置成功')
}

size.value = localStorage.getItem("size") as string
</script>

<style lang="less" scoped>
i {
    font-size: 24px;
    cursor: pointer;
}
</style>